<template>
  <view 
    v-show="show" 
    class="picker" 
    @click="close"
  >
    <view 
      class="box" 
      @tap.stop="stopEvent"
    >
      <view class="title">
        {{ title }}
      </view>
      <view
        v-for="(item, index) in list"
        :key="index"
        class="item"
        @click="checked(index)"
      >
        <image
          v-if="idx == index"
          class="checkImg"
          src="/static/public/check.png"
          mode="widthFix"
        />
        <text 
          v-else 
          class="checkView"
        />
        <text>{{ item.txt }}</text>
      </view>
      <view 
        class="btn"
        @click="close"
      >
        <text>
          确定
        </text>
      </view>
      <view 
        v-if="isIpx" 
        class="iphoneX_bottom"
      />
      <image
        class="icon"
        src="https://lishiots.oss-cn-hangzhou.aliyuncs.com/webstatic/outing-fun/icon.png"
        mode="widthFix"
      />
    </view>
  </view>
</template>

<script>
export default {
  props: {
    // eslint-disable-next-line vue/require-default-prop
    list: {
      type: Array
    },
    title: {
      type: String,
      default: '请选择福利类型'
    },
  },
  data() {
    return {
      show: false,
      idx: 0,
      isIpx: this.$isIphoneX
    }
  },
  methods: {
    checked(index) {
      console.log(index)
      this.idx = index
      this.$emit('onSubmit', this.list[this.idx])
    },
    open() {
      console.log(2)
      this.show = true
    },
    close() {
      this.show = false
    },
    stopEvent() {
      return
    },
  },
}
</script>

<style lang="less" scoped>
.picker {
  position: fixed;
  width: 100%;
  z-index: 600;
  background-color: rgba(0, 0, 0, 0.6);
  transition: transform 0.3s ease;
  // overflow: hidden;
  // transform: translateX(100%);
  border: 1px solid red;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  .box {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #ffffff;
    border-radius: 40rpx 40rpx 0px 0px;
    padding: 72rpx 30rpx;
    .title {
      text-align: center;
      font-size: 32rpx;
      position: relative;
    }
    .icon {
      position: absolute;
      left: 50%;
      top: -53rpx;
      transform: translateX(-50%);
      width: 107rpx;
      height: 107rpx;
    }
    .item {
      line-height: 104rpx;
      display: flex;
      align-items: center;
      .checkImg {
        width: 44rpx;
        height: 44rpx;
        border-radius: 100%;
        margin-right: 37rpx;
      }
      .checkView {
        width: 44rpx;
        height: 44rpx;
        border-radius: 100%;
        border: 2rpx solid #333333;
        margin-right: 37rpx;
        box-sizing: border-box;
      }
    }
    .btn{
      width: 590rpx;
      height: 82rpx;
      line-height: 82rpx;
      text-align: center;
      font-size: 34rpx;
      background-color: #FAE14D;
      border-radius: 41rpx;
      margin: 27rpx auto 17rpx;
    }
  }
}
</style>
